<template>
	<view class="app" :style="{height: clientHight + 'px'}">
		<view class="index">
			<view class="status_bar">
				<view class="top_view"></view>
			</view>
		</view>
		<view class="login-box">
			<view class="container">
				<view class="logo">
					<image src="http://ai.ylcaifu.com/appimg/images/7.0-%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81%E7%AD%89%E9%A1%B5%E9%9D%A2/7.1.2-%E6%B3%A8%E5%86%8C/android/drawable-xhdpi/logo.png" mode="widthFix"></image>
				</view>
				<view class="bottom">
					
					<view class="bottom-top"><view class="login-class">
						<view :class="{active:flag==0}" @click="tab" data-id="0">
							短信验证登录
						</view>
						<view :class="{active:flag==1}" @click="tab" data-id="1">
							账号密码登录
						</view>
					</view>
					<view class="inp-group" v-show="flag==0">
						<view class="inp-box">
							<image src="../../static/image/my/shoujihao.png" mode="aspectFit" class="icon"></image>
							<input type="text"  placeholder="请输入手机号" class="input" v-model="mobile"/>
						</view>
						<view class="inp-box">
							<image src="../../static/image/my/yanzhengma.png" mode="aspectFit" class="icon"></image>
							<view class="inp-box-right">
								<input type="text"  placeholder="请输入验证码" v-model="vcode" class="input" />
								<view class="get-number">
									<view @click="getCode">{{getNumber}}{{isClick?'':'秒'}}</view>
									
								</view>
							</view>
							
						</view>

					</view>
					<view class="inp-group" v-if="flag==1">
						<view class="inp-box">
							<image src="../../static/image/my/shoujihao.png" mode="aspectFit" class="icon"></image>
							<input type="text"  v-model="userName" autofocus ref="userName" placeholder="请输入账号" class="input" @confirm="toIndex"  />
						</view>
						<view class="inp-box">
							<image src="../../static/image/my/yanzhengma.png" mode="aspectFit" class="icon"></image>
							<input type="password" v-model="password" ref="password"  autocomplete="new-password" placeholder="请输入密码" class="input" @confirm="toIndex"/>
							
						</view>

					</view>
					<view class="button-box">
						<view class=" btn" @click="toIndex" >登录</view>
					</view>

					<!-- <view class="forget" @click="toReset">忘记密码？</view> -->
					 </view>
					<!-- <view class="zhuce" @click="toRegister">没有账号，立即注册</view> -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	var _self;
	
	import {
        mapState,
        mapMutations
    } from 'vuex'
	//引入全局变量
	import global_ from '../../components/tool/Global';
	export default {
// 		created() {
// 			// 获取当前可视区域的高度
// 			const height = document.documentElement.clientHeight;
// 			// 在页面整体加载完毕时
// 			 
// 		},
// 

		data(){
			
			return{
				flag:0,
				height:'',
				userNameFocusFlag:false,
				passwordFocusFlag:false,
				getNumber:'获取验证码',
				isClick:true,
				countdown:59,
				timer:null,
				mobile:'',
				vcode:'',
				userName:'',
				password:'',
				clientHight: '',
				footerHight: ''
			}
		},
		onLoad(){
			
			this.initPosition();
			
			_self=this;
			//从缓存中获取登录用户角色 
			var userInfo=uni.getStorageSync('userinfo_key');
			console.info("userinfo==============="+JSON.stringify(userInfo))
			var flag=''!=userInfo&&null!=userInfo;
			console.log("flg========"+flag)
			if(flag){
				uni.switchTab({
					url: '../../pages/index/index',
					success: res => {
					console.log("App.vue..........success"+JSON.stringify(res));
					},
					fail: res=> {
						console.log("App.vue..........fail"+JSON.stringify(res));
					},
					complete: () => {
						console.log("App.vue..........complete"+JSON.stringify(res));
					}
				}); 
			}
			
		},
		onReady() {
			this.getClientHight();
		},
		methods:{
			 getClientHight() {
				let that = this;
				uni.getSystemInfo({
					success(res) {
						console.log(res.screenHeight); //获取手机设备屏幕高度
						that.clientHight = res.screenHeight;
					}
				})
			},
			
			tab(e){
				if(e.target.dataset.id==0){
					this.flag=0
				}else{
					this.flag=1
				}
			},
			toRegister(){
				uni.navigateTo({
					url: './register',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toIndex(){
				if(this.flag==0){
					this.loginForMobileAndCode();
				}else{
					this.loginForUserNameAndPassword();
				}
			},
			toReset(){
				uni.navigateTo({
					url: './reset',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			 initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight-100;
				this.height = uni.getSystemInfoSync().windowHeight-260;
            },
			//获取验证码
			getCode(){
				if(!this.isClick) return;
				this.isClick=false;
				this.setInter();
					uni.request({
					method:'POST',
					url: global_.api.getCodeUrl, 
					header : {'content-type':'application/x-www-form-urlencoded'},
					data: {
						mobile: this.mobile
					},
					
					dataType:'json',
					success: (res) => {
						var code=res.data.code;
						var message=res.data.message;
						console.log("调用接口返回结果"+JSON.stringify(res.data));
						if(code!='0'){
							uni.showToast({
							title:message,
							icon:"none"
							});
							return false;
						}else{
							try {
								//获取返回信息
								var code=res.data.data;
							    this.vcode=code;
							} catch (e) {
								// error
							}
							
						}
						
					},fail:(res) => {
						console.log("fail");
						//console.log(res.data);
						this.text = 'request fail';
					},complete:(res) => {
						console.log("complete");
						//console.log(res.data);
					}
				});
				
			},
			//倒计时
			setInter(){
				var that=this
				this.getNumber=this.countdown
				this.timer=setInterval(function(){
					--that.getNumber
					//console.log(that.getNumber)
					if(that.getNumber==0){
						//console.log("this.getNumber==0")
						clearInterval(that.timer)
						that.getNumber="获取验证码"
						that.isClick=true
					}
				},1000)
			},loginForMobileAndCode(){
					uni.request({
					method:'POST',
					url: global_.api.loginForMobileAndCode, 
					header : {'content-type':'application/x-www-form-urlencoded'},
					data: {
						mobile: this.mobile,
						vcode:this.vcode
					},
					
					dataType:'json',
					success: (res) => {
						var code=res.data.code;
						var message=res.data.message;
						console.log("手机号登录调用接口返回结果"+JSON.stringify(res.data));
						if(code!='0'){
							uni.showToast({
							title:message,
							icon:"none"
							});
							return false;
						}else{
							try {
								//获取返回信息
								var token=res.data.data.token;
								//保存用户身份
								var userInfo={};
								userInfo.mobile=this.mobile;
								userInfo.loginRole=1;
								uni.clearStorageSync();//先清空缓存
								//登录成功，保存token到缓存中 
								uni.setStorageSync('loginRole', userInfo.loginRole);
								uni.setStorageSync('token_key', token);
								uni.setStorageSync('userinfo_key', userInfo);
								this.token=token;
								//登录成功之后，页面跳转到首页
								uni.reLaunch({
									url:'../index/index',
									success:res=>{
											console.log("success"+JSON.stringify(res))
									},fail:(res)=> {
										console.log("fail"+JSON.stringify(res))
									},complete: (res) => {
										
									}
								})
							} catch (e) {
								// error
							}
							
						}
						
					},fail:(res) => {
						console.log("fail");
						//console.log(res.data);
						this.text = 'request fail';
					},complete:(res) => {
						console.log("complete");
						//console.log(res.data);
					}
				});
				
			},loginForUserNameAndPassword(){
				var url=global_.api.loginForAccountAndPasswrod;
				uni.request({
					method:'POST',
					url: url, 
					header : {'content-type':'application/x-www-form-urlencoded'},
					data: {
						userName: this.userName,
						password:this.password
					},
					
					dataType:'json',
					success: (res) => {
						var code=res.data.code;
						var message=res.data.message;
						console.log("账号和密码登录调用接口返回结果"+JSON.stringify(res.data));
						if(code==0){
							//保存理财师名称
							try{
								var pEmplName=res.data.data.pEmplName;
								//设置身份标识 
								var userInfo={};
								userInfo.mobile=this.mobile;
								userInfo.loginRole=3;
								userInfo.adminName=pEmplName;
								uni.clearStorageSync();//先清空缓存
								uni.setStorageSync('loginRole', userInfo.loginRole);
								uni.setStorageSync('userinfo_key', userInfo);
								//获取返回信息
								var token=res.data.data.token;
								//登录成功，保存token到缓存中 
								uni.setStorageSync('token_key', token);
								//登录成功之后，页面跳转到首页 
								uni.reLaunch({
									url:'../index/index',
									success:res=>{
											console.log("success"+JSON.stringify(res))
									},fail:(res)=> {
										console.log("fail"+JSON.stringify(res))
									},complete: (res) => {
										
									}
								})
							}catch(e){
								
							}
							
						}else{
						this.userNameFocusFlag=true;
						uni.showToast({
							title:message,
							icon:"none"
							});
							return false;
						}
						
					},fail:(res) => {
						console.log("fail");
						console.log(res.data);
					},complete:(res) => {
						console.log("complete");
						console.log(res.data);
					}
				});
					
					
			}
			
			
		}
		
	}
</script>

<style>
	.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
    .top_view{
        height: var(--status-bar-height);
        width: 100%;
        position: fixed;
        top: 0;
    }
	.app {
		width: 100%;
		height: 100%;
		background: url("http://ai.ylcaifu.com/appimg/images/7.0-%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81%E7%AD%89%E9%A1%B5%E9%9D%A2/7.1.1-%E7%99%BB%E5%BD%95/android/drawable-xhdpi/beijing.png") no-repeat;
		background-size: 100% 100%;
		
		/* text-align: center; */
		position: fixed;
		left: 0;
		right: 0;
		top:0;
		bottom:0;
	}
	/* page {
		width: 100%;
		height: 100%;
		background: url("http://ai.ylcaifu.com/appimg/images/7.0-%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81%E7%AD%89%E9%A1%B5%E9%9D%A2/7.1.1-%E7%99%BB%E5%BD%95/android/drawable-xhdpi/beijing.png") no-repeat;
		background-size: 100% 100%;
		
		text-align: center; 
		position: fixed;
		left: 0;
		right: 0;
		top:0;
		bottom:0;
	} */
	.login-box {
		width: 100%;
		height: 100%;
	}

	.container {
		padding:0 40px;
		height: 100%;
	}

	.logo {
		width:100%;
		height: 30%;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	.bottom{
	
		height: 70%;
	}
	.logo image {
		width: 100%;
		height: 32px;
	}

	.login-class {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		font-size: 14px;
		color: rgba(255, 255, 255, 1);
		font-weight: bold;
		height: 33px;
		margin-bottom: 30px;
	}

	.active {
		font-size: 15px;
		font-weight: bold;
		color: rgba(196, 156, 90, 1);
		background: url("http://ai.ylcaifu.com/appimg/images/7.0-%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81%E7%AD%89%E9%A1%B5%E9%9D%A2/7.1.1-%E7%99%BB%E5%BD%95/android/drawable-xhdpi/xuangzhong.png") bottom no-repeat;
		background-size: 100% 3px;
	}

	.inp-group {
		margin-bottom: 18px;
	}

	.inp-box {
		height: 47px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: url("http://ai.ylcaifu.com/appimg/images/7.0-%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81%E7%AD%89%E9%A1%B5%E9%9D%A2/7.1.1-%E7%99%BB%E5%BD%95/android/drawable-xhdpi/shoujihaobeijing.png") no-repeat center;
		background-size: 100% 100%;
		margin-bottom: 5%;
	}

	.icon {
		width: 15px;
		height: 19px;
		padding: 0 10px;

	}
	.inp-box-right{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.input{
		text-align: left;
		color: rgb(255, 255, 255);
		flex:3;
		
	}
	
	.get-number {
		height: 20px;
		flex: 2;
		margin-right: 10px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.get-number view {
		font-size: 12px;
		line-height: 20px;
		border-radius: 10px;
		border: 1px solid rgba(196, 156, 90, 1);
		color: rgba(196, 156, 90, 1);
		padding: 0 20upx;
		height: 20px;
	}
	.button-box {
		height: 47px;
		width: 100%;
		background: url("http://ai.ylcaifu.com/appimg/images/7.0-%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81%E7%AD%89%E9%A1%B5%E9%9D%A2/7.1.1-%E7%99%BB%E5%BD%95/android/drawable-xhdpi/denglubeijing.png") no-repeat center;
		background-size: 100% 100%;
		margin-bottom: 18px;


	}

	.btn {
		text-align: center;
		line-height: 47px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		font-size: 17px;

	}

	.forget {
		
		
		font-size: 14px;
		
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		
		opacity: 0.6;
	}
	.bottom-top{
		height: 80%;
	}
	.zhuce{
		height: 18%;
		
		line-height: 70px;
		
		font-size: 12px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		opacity: 0.6;
		border-top:1px solid rgba(255,255,255,0.4);
		
	}
</style>
